class AppConfigType extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            appConfigTypes: [],
            list: [''],
            isParent: false,
            inputValues: {
                id: '',
                parentId: '',
                typeName: '',
                typeKey: '',
                typeValue: '',
                deviceType: '',
                description: ''
            }
        };
        this.pageCount = 0;
    }

    componentDidMount() {
        this.verify = {
            typeName: function (value) {
                if (value.length < 2) {
                    return '类型名称至少得2个字符!';
                }
            },
            typeKey: function (value) {
                let ret = /^[a-zA-Z]+$/;
                if (!ret.test(value)) {
                    return '类型Key只能是英文！';
                }
            }/*,
            typeValue: function (value) {
                if (value.length < 2) {
                    return '类型Value至少得2个字符！';
                }
            }*/
        };
        this.queryAppConfigTypes();
    }

    queryAppConfigTypes() {
        postJson("/appConfig/type/queryAppConfigTypes.x", {
            deviceType: this.refs.deviceType.value
        }, (data) => {
            console.log("data", data);
            this.setState({
                appConfigTypes: data.data
            }, () => {
                this.refs.table.refresh();
            });
        })
    }

    /* custom functions */
    updateList(page, pageSize) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        params.parentId = this.refs.typeParentId.value;
        if (params.parentId) {
            postJson("/appConfig/type/queryAppConfigTypePage.x", params, (data) => {
                console.log("data", data);
                let list = data.data.list;
                this.pageCount = data.data.size;
                this.setState({
                    list: list
                });
            })
        } else {
            this.setState({
                list: []
            });
        }
    }

    search() {
        this.refs.table.refresh();
    }

    addAppConfigType(isParent) {
        this.setState({
            isParent: isParent
        }, () => {
            this.refs.modal_add.show();
        });
    }

    btnSubmit() {
        if (!this.state.isParent) {
            console.log("typeParentId", this.refs.typeParentId.value)
            this.state.inputValues.parentId = this.refs.typeParentId.value;
        }
        this.state.inputValues.deviceType = this.refs.deviceType.value;
        postJson("/appConfig/type/saveAppConfigType.x", this.state.inputValues, () => {
            layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
            this.queryAppConfigTypes();
            this.refs.modal_add.close();
        });
    }

    edit(type) {
        this.state.inputValues = {
            id: type.id,
            parentId: type.parentId,
            typeName: type.typeName,
            typeKey: type.typeKey,
            typeValue: type.typeValue,
            deviceType: type.deviceType,
            description: type.description
        };
        this.state.isParent = type.parentId === '-1';
        this.refs.modal_add.show();
        this.setState({});
    }

    delete(id) {
        layui.layer.confirm('确定要删除该条目?删除之后此条目将无法被选中!', (index) => {
            postJson("/appConfig/type/deleteAppConfigType.x", {
                    id: id
                },
                () => {
                    this.refs.table.refresh();
                    layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除成功', {icon: 6});
                });
            layui.layer.close(index);
        });
    }

    deleteType() {
        layui.layer.confirm('确定要删除该类型?删除之后此类型将把所有此类型的条目都删除!', (index) => {
            postJson("/appConfig/type/deleteAppConfigType.x", {
                id: this.refs.typeParentId.value,
                isType: true
            }, () => {
                this.queryAppConfigTypes();
                layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除成功', {icon: 6});
            });
            layui.layer.close(index);
        });
    }

    endCallback() {
        this.setState({
            inputValues: {
                id: '',
                parentId: '',
                typeName: '',
                typeKey: '',
                typeValue: '',
                deviceType: '',
                description: ''
            }
        });
    }

    inputChange(type, value) {
        this.state.inputValues[type] = value;
        this.setState({});
    }

    render() {
        return (
            <Frame header="APP配置类型" headerBtns={[
                <SecurityCheck roles="admin">
                    <HeaderBtn onClick={() => this.addAppConfigType(true)}><i className="fa fa-plus"/>&nbsp;
                        新增类型</HeaderBtn>
                </SecurityCheck>,
                <SecurityCheck roles="admin">
                    <HeaderBtn onClick={() => this.addAppConfigType(false)}><i className="fa fa-plus"/>&nbsp;
                        新增条目</HeaderBtn>
                </SecurityCheck>
            ]
            }
            >
                <Form type="pane">
                    <Item>
                        <Label>设备类型</Label>
                        <Select name="deviceType" ref="deviceType" onChange={(data) => this.queryAppConfigTypes()}>
                            <option value="all">所有设备</option>
                            <option value="outdoor">门口机</option>
                            <option value="indoor">室内机</option>
                            <option value="mobile">手机</option>
                        </Select>
                        <Label>配置类型</Label>
                        <Select name="typeParentId" ref="typeParentId"
                                onChange={() => {
                                    this.refs.table.refresh()
                                }}>
                            {
                                this.state.appConfigTypes.map((appConfigType) => {
                                    return <option value={appConfigType.id}>{appConfigType.typeName}</option>
                                })
                            }
                        </Select>
                        <Button btnType="danger"
                                onClick={() => this.deleteType()}>删除</Button>
                    </Item>
                    <Table ref="table" count={this.pageCount}
                           pageOnClick={(page, pageSize) => this.updateList(page, pageSize)}>
                        <thead>
                        <tr>
                            <th>条目名称</th>
                            <th>条目Value</th>
                            <th>更新时间</th>
                            <th>描述</th>
                            <th width="60">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {

                            this.state.list.map((array) => {
                                return <tr>
                                    <td>{array.typeName}</td>
                                    <td>{array.typeValue}</td>
                                    <td>{array.updateTime}</td>
                                    <td>{array.description}</td>
                                    <td>
                                        <SecurityCheck roles="admin">
                                            <Button size="xs"
                                                    onClick={() => this.edit(array)}>编辑</Button>
                                            <Button size="xs" btnType="danger"
                                                    onClick={() => this.delete(array.id)}>删除</Button>
                                        </SecurityCheck>
                                    </td>
                                </tr>
                            })
                        }
                        </tbody>
                    </Table>

                    <Modal
                        disableOverFlow={true}
                        title="添加标签"
                        ref="modal_add"
                        rea={['500px']}
                        endCallback={() => this.endCallback()}>
                        <Form type="pane" size="sm" verify={() => {
                            return this.verify;
                        }}>

                            <Input type="hidden" value={this.state.inputValues.parentId}/>
                            <Input type="hidden" value={this.state.inputValues.id}/>
                            <Item>
                                <Label>{this.state.isParent ? "类型名称" : '条目名称'}</Label>
                                <Input type="text"
                                       value={this.state.inputValues.typeName}
                                       lay-verify="typeName"
                                       onChange={(value) => this.inputChange('typeName', value)}
                                       placeholder="请输入名称"
                                />
                            </Item>
                            {this.state.isParent ?
                                <Item>
                                    <Label>类型Key</Label>
                                    <Input type="text"
                                           value={this.state.inputValues.typeKey}
                                           lay-verify="typeKey"
                                           onChange={(value) => this.inputChange('typeKey', value)}
                                           placeholder="请输入Key"
                                    />
                                </Item> : ''
                            }
                            <Item>
                                <Label>{this.state.isParent ? "类型Value" : '条目Value'}</Label>
                                <Input type="text"
                                       value={this.state.inputValues.typeValue}
                                       lay-verify="typeValue"
                                       onChange={(value) => this.inputChange('typeValue', value)}
                                       placeholder="请输入Value"
                                />
                            </Item>
                            <Item>
                                <Label>描述</Label>
                                <Input type="text"
                                       value={this.state.inputValues.description}
                                       lay-verify="description"
                                       onChange={(value) => this.inputChange('description', value)}
                                       placeholder="请输入描述"
                                />
                            </Item>
                            <Item>
                                <Button formBtn={true}
                                        size='sm'
                                        btnType='normal'
                                        lay-submit="true"
                                        onClick={() => this.btnSubmit()}>确定</Button>
                            </Item>
                        </Form>
                    </Modal>
                </Form>
            </Frame>
        )
    }
}

ReactDOM.render(
    <AppConfigType/>
    , document.getElementById('root'));
